<template>
    <div class="layout layout-row">
        <user-nav></user-nav>
        <div class="container-fluid layout content-wp width1200 mg-auto">
            <user-Sider></user-Sider>
            <div class="layout">
                <user-menu @dialog="showDialog"></user-menu>
                <user-table :list="usersData" @dialog="showDialog" @del="delHandle"></user-table>
                <user-pagination :page="paging" @jump="jumpPage"></user-pagination>
            </div>
        </div>
        <public-dialog :dialog="dialog" :userData="currentUserData" @dialog="showDialog" @saveClk="saveUser"></public-dialog>
    </div>
</template>

<script>
import Nav from "./Nav.vue"
import Sider from "./Sider.vue"
import Menu from "./Menu.vue"
import UserTable from "./UserTab.vue"
import Pagination from "./Pagination.vue"
import Dialog from "./Dialog.vue"
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css"

export default {
    data() {
        return {
            usersData: [],
            dialog: {
                isOpen: false,
                isAdd: true
            },
            currentUserData: {},
            paging: {
                pageSize: 10,
                currentPage: 1,
                totalPage: 0
            }
        }
    },
    methods: {
        getUserData() {
            const userListUrl = `http://localhost/api.php/user/userlist?transform=1&page=${this.paging.currentPage},${this.paging.pageSize}&order=id,desc`
            fetch(userListUrl).then(response => response.json()).then(data => {
                this.usersData = data.userlist
                this.paging.totalPage = data._results
            })
        },
        showDialog(dialogData, userData) {
            this.dialog = dialogData
            if (userData) {
                this.currentUserData = Object.assign({}, userData)
                this.currentUserData.hobbies = this.currentUserData.hobbies.split(",")
            } else {
                this.currentUserData = { edu: "0", gender: "男", hobbies: [] }
            }
        },
        saveUser(userData) {
            let saveUrl = "http://localhost/api.php/user/userlist"
            let method = "post"
            if (!this.dialog.isAdd) {
                saveUrl += "/" + userData.id
                method = "put"
            }
            userData.hobbies = userData.hobbies.join(",")
            fetch(saveUrl, {
                method: method,
                body: JSON.stringify(userData)
            }).then(response => response.json()).then(id => {
                this.dialog.isOpen = false
                this.getUserData()
            })
        },
        delHandle(uId) {
            let delUrl = `http://localhost/api.php/user/userlist/${uId}`
            if (!confirm("确定要删除该用户吗？")) {
                return
            }
            fetch(delUrl, {
                method: "delete"
            }).then(response => response.json()).then((delId) => {
                if (delId > 0) {
                    this.getUserData()
                }
            })
        },
        jumpPage(page) {
            this.paging.currentPage = page
            this.getUserData()
        }
    },
    components: {
        "user-nav": Nav,
        "user-Sider": Sider,
        "user-menu": Menu,
        "user-table": UserTable,
        "user-pagination": Pagination,
        "public-dialog": Dialog
    },
    created() {
        this.getUserData()
    }
}
</script>

<style>
div,
ul,
li,
span {
    padding: 0;
    margin: 0;
}

.layout-row {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
}

.layout {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
}

.content-wp {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.layout-sider {
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    position: relative;
    background: #404040;
    min-width: 0;
    flex: 0 0 200px;
    width: 200px;
    background: rgb(255, 255, 255);
    margin-right: 10px;
}





















/*公共样式  */


/*width  */

.width1200 {
    width: 1200px;
}





















/*margin  */

.mg-auto {
    margin: auto;
}

.mt-10 {
    margin-top: 10px;
}

.mt-O10 {
    margin: 10px 0 0;
}
</style>
